<template>
  <div class="main-content">
    <div class="card" >
      <el-table :data="data.seatList" style="width: 100%" :header-cell-style="{color:'#333',backgroundColor:'#eaf4ff'}">
        <el-table-column prop="room" label="阅览室" width="180" />
        <el-table-column prop="no" label="座位号" width="180" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="date" label="预约时间" />
        <el-table-column label="操作">
          <template #default="scoped">
            <el-button @click="cancel(scoped.row)" v-if="scoped.row.status==='已选'" type="primary">退坐</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-pagination
          v-model:current-page="data.pageNum"
          v-model:page-size="data.pageSize"
          :page-sizes="[5,10,20]"
          :total="data.total"
          layout="total,sizes, prev, pager, next,jumper"
          @current-change="loadSeat"
          @size-change="loadSeat"
      />
    </div>
  </div>
</template>

<script setup>
 import {reactive} from "vue";
 import request from "@/utils/request.js";
 import {ElMessage} from "element-plus";

 const data=reactive({
   user:JSON.parse(localStorage.getItem('code_user')||'{}'),
   seatList:[],
   pageNum:1,
   pageSize:5,
   total:0,
 })

 const loadSeat=()=>{
   request.get('/seatRecord/selectPage',
       {
         params:{
           userName:data.user.username,
           pageNum:data.pageNum,
           pageSize:data.pageSize
         }
       }).then(res=>{
     if (res.code==='200'){
       data.seatList=res.data?.list
       data.total=res.data?.total
     }else {
       ElMessage.error(res.msg)
     }
   })
 }
 loadSeat()

 const cancel=(row)=>{
   request.put(`/seat/cancelById/${row.seatId}`).then(res=>{
     if (res.code==='200'){
       ElMessage.success('退坐成功')
       loadSeat()
     }else {
       ElMessage.error(res.msg)
     }
   })
 }
</script>

<style>
.main-content{
  max-width: 1000px;
  margin: 10px auto;
}
</style>